<template>
  <div id="prohibit">  
   
    <el-row>
       <el-col :span="12">  
        <div style="height:38px;line-height:38px;width:150px;"> 
              <i class="el-icon-back" @click="goBack"></i>   
              返回           
         </div> 
         </el-col>
        <el-col :span="12" style="text-align: right;">         
            <el-button type="primary" class="custom_color_button" style="margin-bottom:10px;" @click="add_but">添加禁止区间</el-button>         
        </el-col>
  </el-row>

   <!-- 渲染数据list -->
   <prohibit-list :datalist="datalist" @up_list_fun="list_fun"> </prohibit-list>

      
   <div style="margin-top:20px;text-align: center;">
      <el-pagination
        background
        @current-change="handleCurrentChange"
        :page-size="10"  
        layout="prev, pager, next, jumper"
        :total="count">
      </el-pagination>
    </div>
   

      <!-- 添加内容 -->
    <el-dialog title="禁止设置" :visible.sync="add_mtk"  width="400px">
        <div style="width:100%;"> 


        <el-form ref="form"   label-width="70px" style="width:100%;">
    
               <el-form-item label="" label-width="0px">
                            <el-col :span="11">
                                    <el-time-picker placeholder="选择时间"   format="HH:mm" value-format="HH:mm" v-model="from.time1" style="width: 100%;"></el-time-picker>
                            </el-col>
                            <el-col class="line" :span="2" style="text-align: center;">-</el-col>
                            <el-col :span="11">
                                    <el-time-picker placeholder="选择时间"   format="HH:mm" value-format="HH:mm" v-model="from.time2" style="width: 100%;"></el-time-picker>
                            </el-col>
              </el-form-item>  
                         
            </el-form>

            <div style="text-align: center;width:50%;margin:auto;margin-top:20px;">
                <el-button type="primary" class="custom_color_button" style="width:80%;" @click="add_but_qr">确认</el-button>
            </div>

        </div> 
    </el-dialog>
    

      
  </div>
</template>

<script>
import ProhibitList from '@/view/Manor/ProhibitList'
export default {
  name: 'prohibit',
  data () {
    return {
        datalist:[],
        page:1,
        count:0,
        add_mtk:false,
        from:{
            time1:'',
            time2:''
        }
    }
  },
 components:{
    ProhibitList
  },
  created(){
     this.list_fun()
  },
  mounted (){
    
  },
  methods: {
      list_fun(){
          this.post("/ban_onsale/listData", {
              page:this.page,
	        }).then(res => {
            this.count = res.result.count
            this.datalist = res.result.list
            //console.log(res)
         })
      },
      add_but(){
           this.from.time1 = ''
           this.from.time2 = ''
           this.add_mtk = true
      },
      add_but_qr(){
           this.post("/ban_onsale/create", {
                   start:this.from.time1,
                   end:this.from.time2,
                }).then(res => {

                    if(res.error_code == 0){
                      this.open1(res.result,'success')  //提示框
                      this.list_fun()
                      this.add_mtk = false
                    }else {
                    this.open1(res.message,'warning')
                }

        })
      },
      goBack() {
        this.$router.go(-1)
      },
      handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
      },
      handleCurrentChange(val) {
        this.page = val
        this.list_fun()
        console.log(`当前页: ${val}`);
      }
  }
}
</script>


<style scoped>

</style>
